import "./index.less";
import { PlusOutlined } from "@ant-design/icons";
import { Button, Space, Tabs, Tag, message } from "antd";
import { ProCard, ProDescriptions, ProTable, TableDropdown } from "@ant-design/pro-components";

const columns = [
	{
		title: "序号",
		dataIndex: "index",
		width: 64,
		valueType: "indexBorder"
	},
	{
		title: "标题",
		dataIndex: "title",
		copyable: true,
		ellipsis: true,
		search: false
	},
	{
		title: (_, type) => (type === "table" ? "状态" : "列表状态"),
		dataIndex: "state",
		initialValue: "all",
		filters: true,
		onFilter: true,
		valueType: "select",
		valueEnum: {
			all: { text: "全部", status: "Default" },
			open: {
				text: "未解决",
				status: "Error"
			},
			closed: {
				text: "已解决",
				status: "Success"
			}
		}
	},
	{
		title: "排序方式",
		key: "direction",
		hideInTable: true,
		hideInDescriptions: true,
		dataIndex: "direction",
		filters: true,
		onFilter: true,
		valueType: "select",
		valueEnum: {
			asc: "正序",
			desc: "倒序"
		}
	},
	{
		title: "标签",
		dataIndex: "labels",
		width: 120,
		render: (_, row) => (
			<Space>
				{row.labels.map(({ name, color }) => (
					<Tag color={color} key={name}>
						{name}
					</Tag>
				))}
			</Space>
		)
	},
	{
		title: "option",
		valueType: "option",
		dataIndex: "id",
		render: (text, row) => [
			<a href={row.url} key="show" target="_blank" rel="noopener noreferrer">
				查看
			</a>,
			<TableDropdown
				key="more"
				onSelect={key => message.info(key)}
				menus={[
					{ key: "copy", name: "复制" },
					{ key: "delete", name: "删除" }
				]}
			/>
		]
	}
];

const UseComponent = () => {
	return (
		<div className="card content-box">
			{/* <span className="text">UseComponent 🍓🍇🍈🍉</span> */}
			<ProTable
				className="proTable"
				columns={columns}
				headerTitle="查询表格"
				rowKey="id"
				pagination={{
					pageSize: 5
				}}
				toolBarRender={() => [
					<Button key="3" type="primary">
						<PlusOutlined />
						新建
					</Button>
				]}
			/>
		</div>
	);
};

export default UseComponent;
